<template>
    <div class = "login-body">
      <div class = "login-panel">
        <div class = "login-title">注册觅心阁账号</div>
        <el-form :model = "formData" 
                 :rules = "rules"
                  ref="formDataRef" >
          <el-form-item label="" prop = "account">
            <el-input placeholder="请输入email"
                      v-model="formData.account" >
              <template #prefix>
                <span class = "iconfont icon-user-filling"></span>
              </template>        
            </el-input>
  
          </el-form-item>
          <el-form-item label="" prop = "password">
            <el-input placeholder="请输入密码"
                      v-model="formData.password" >
              <template #prefix>
                <span class = "iconfont icon-password"></span>
              </template>        
            </el-input>
          </el-form-item>
          <el-form-item label="" prop = "replaypassword">
            <el-input placeholder="请确认密码"
                      v-model="formData.password" > 
              <template #prefix>
                <span class = "iconfont icon-password"></span>
              </template>        
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="">
            <el-input placeholder="请输入验证码"
                      v-model="formData.checkCode"/>
            <img src = "checkCode">
          </el-form-item> -->

          <el-form-item label="">
            <el-button class = "login-button" type = "primary"  @click = "clicked" >注册</el-button>
          </el-form-item>
        </el-form>
  
   
      </div>
      <div class="el-login-bottom">
        <span>blog © 2023.4 - {{ new Date().getFullYear() }}.{{ new Date().getMonth()+1 }} By 觅心阁</span>
      </div> 
    </div>
  </template>
  
  <script setup>
  import VueCookies from 'vue-cookies'
  import { getCurrentInstance, reactive, ref } from "vue"
  import { useRouter } from 'vue-router';
  const { proxy } = getCurrentInstance();
  const router = useRouter();
  
  //表单验证
  const formDataRef = ref();
  const formData = reactive({});
  
  const rules = {
    account:[{
      required: true,
      message: "账号不能为空！",
    }],
    password:[{
      required:true,
      message: "密码不能为空！"
    }],
    replaypassword:[{
      required:true,
      message: "密码不能为空！"
    }]
  }
  
  
  //输入框初始化, 读取cookie信息
  const init = () => {
    const loginInfo = VueCookies.get("lofinInfo");
    if(!loginInfo)
    {
      return;
    }
    Object.assign(formData, loginInfo);
  }
  init();
  
  //点击事件
  const clicked = () => {
    formDataRef.value.validate(async(valid) => {
      if(!valid){
        return;
      }
      const valuePassword = document.querySelector('#myInput').value

  
      //否则向后端发送请求
      // let result = await proxy.Request({
      //   url: api.login,
      //   params:{
      //     account: formData.account,
      //     password: formData.password,
      //   }
      // })
  
      setTimeout(() => {
        router.push("/home");
      });
  
      //记住账号密码
      //后续要改动, 写前端时没做登录验证, 这里保存所有的登录账号
      // const loginInfo = {
      //   account: formData.account,
      //   account: formData.password, 
      // }
  
      // //VueCookies.set("userInfo", result.data, 0);
      // if(formData.rememberMe == 1){
      //   VueCookies.set("loginInfo", loginInfo, "7d")
      // }
  
    });
  }
  
  //验证码
  // const checkCode = "api/checkCode"
  
  </script>
  
  <style lang="scss">
  .login-body{
    font-family: "micrsoft yahei";
    width: 100%;
    height:calc(100vh);
    background-size: cover;
    background-image: url(../assets/login_body.jpg);
    background-position: center;
  
    .login-panel{
      width: 26%;
      background: rgba(255, 255, 255, 0.8);
      float: right;
      //position: center;
      //text-align: center;
  
      padding: 20px;
      margin-right: 37%;
      margin-top: 10%;
      border-radius: 5px;
      box-shadow: 2px, 2px, 10px #fff;
      .login-button{
        width: 100%;
      }
      
      .login-anotherlogin{
        float: left;
        margin-left: auto;
        display: flex;
        align-items: center;
        span{
          margin-right:10px; /* 调整间距 */
        }
        span:last-child{
          margin-right: 0;
        }
      }
        
      .login-title{
        text-align: center;
        font-size: 20px;
        margin-bottom: 10px;
      }
    }
  
    .el-login-bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 10px;
        //background-color: #f5f5f5;
        text-align: center;
      }
  
  }
  </style>
  